<template>
  <div class="tabbar">
    <form-preview :header-label="$t('学员名称')" header-value="张三" :body-items="list" :footer-buttons="buttons1"></form-preview>
    <br>
    <form-preview :header-label="$t('学员名称')" header-value="李四" :body-items="list" :footer-buttons="buttons2" name="demo"></form-preview>
    <br>
    <form-preview :header-label="$t('学员名称')" header-value="王五" :body-items="list" :footer-buttons="buttons2"></form-preview>
  </div>
</template>
<i18n>
学员名称:
  en: Name
标题标题:
  en: Item Title
商品:
  en: Product
很长很长的名字很长很长的名字很长很长的名字很长很长的名字很长很长的名字:
  en: Long Long Long Long Long Long Long Long Long Long Long Long Content
名字名字名字:
  en: Name Name
电动打蛋机:
  en: Item title
辅助操作:
  en: Info
操作:
  en: Action
点击事件:
  en: Click Event
跳转到首页:
  en: Homepage
</i18n>

<script>
import { FormPreview } from 'vux'

export default {
  components: {
    FormPreview
  },
  data () {
    return {
      list: [{
        label: '上课时间',
        value: '2018-09-23 10:05'
      }, {
        label: '上课内容',
        value: '1.XXXXXXX 2.XXXXXXX'
      }, {
        label: '家庭作业',
        value: '很长很长的名字很长很长的名字很长很长'
      }, {
        label: '老师评论',
        value: '很长很长的名字很长很长的名字很长很'
      }],
      buttons1: [{
        style: 'default',
        text: '布置作业',
        link: '/homework'
      }, {
        style: 'default',
        text: '评论作业'
      }, {
        style: 'primary',
        text: this.$t('课程记录'),
        link: '/'
      }],
      buttons2: [{
        style: 'primary',
        text: this.$t('查看学员课程记录'),
        onButtonClick: (name) => {
          alert(`clicking ${name}`)
        }
      }]
    }
  },
  mounted: function () {
    // this.$http.post('/api').then(({ data }) => {
    //   console.log(data)
    // })
  },
  methods: {}
}
</script>

<style scoped>
.tabbar {
  padding-bottom: 100px;
}
</style>
